<div class="content-body">
    <!-- 顶部统计卡片 -->
    <div class="layui-row layui-col-space15">
<!--        <div class="layui-col-md3">-->
<!--            <div class="stat-card" style="background: linear-gradient(to right, #67C23A, #85ce61);">-->
<!--                <div class="title" style="color: #fff;">今日新增</div>-->
<!--                <div class="number" style="color: #fff;" id="today-new">0</div>-->
<!--                <div class="desc" style="color: rgba(255,255,255,0.8);">本周: <span id="week-new">0</span> 人</div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-col-md3">-->
<!--            <div class="stat-card" style="background: linear-gradient(to right, #409EFF, #53a8ff);">-->
<!--                <div class="title" style="color: #fff;">今日消费</div>-->
<!--                <div class="number" style="color: #fff;" id="today-birthday">0</div>-->
<!--                <div class="desc" style="color: rgba(255,255,255,0.8);">本月: <span id="month-birthday">0</span> 人</div>-->
<!--            </div>-->
<!--        </div>-->
        <!-- <div class="layui-col-md3">
            <div class="stat-card" style="background: linear-gradient(to right, #F56C6C, #f78989);">
                <div class="title" style="color: #fff;">本月未消费</div>
                <div class="number" style="color: #fff;" id="month-no-consumption">0</div>
                <div class="desc" style="color: rgba(255,255,255,0.8);">近三月: <span id="three-month-no-consumption">0</span> 人</div>
            </div>
        </div> -->
        <!-- <div class="layui-col-md3">
            <div class="stat-card" style="background: linear-gradient(to right, #E6A23C, #eebe77);">
                <div class="title" style="color: #fff;">今日到期</div>
                <div class="number" style="color: #fff;" id="today-expire">0</div>
                <div class="desc" style="color: rgba(255,255,255,0.8);">本月: <span id="month-expire">0</span> 人</div>
            </div>
        </div> -->
    </div>

    <!-- 搜索栏 -->
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" lay-filter="search-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input type="text" name="keyword" placeholder="请输入会员卡号/姓名/手机" class="layui-input" style="width: 200px;">
                    </div>
                    <!-- <div class="layui-inline">
                        <select name="level" lay-search>
                            <option value="">全部等级</option>
                            <?php foreach($levels as $level): ?>
                            <option value="<?php echo $level->id; ?>"><?php echo $level->name; ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div> -->
                    <div class="layui-inline">
                        <select name="store_id" lay-search>
                            <option value="">全部门店</option>
                            <?php foreach($stores as $store): ?>
                            <option value="<?php echo $store->id; ?>"><?php echo $store->name; ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="LAY-member-search">
                            <i class="layui-icon layui-icon-search"></i>查询
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>

            <!-- 操作按钮组 -->
            <div class="layui-btn-container" style="padding-bottom: 10px;">
                <button class="layui-btn layui-btn-sm" data-type="add">
                    <i class="layui-icon layui-icon-add-1"></i>添加会员
                </button>
                <!-- <button class="layui-btn layui-btn-sm" data-type="generate">
                    <i class="layui-icon layui-icon-template-1"></i>生成会员卡
                </button>
                <button class="layui-btn layui-btn-sm" data-type="card">
                    <i class="layui-icon layui-icon-user"></i>会员卡管理
                </button>
                <button class="layui-btn layui-btn-sm" data-type="level">
                    <i class="layui-icon layui-icon-senior"></i>会员等级
                </button> -->
                <!-- <button class="layui-btn layui-btn-sm" data-type="points">
                    <i class="layui-icon layui-icon-diamond"></i>积分记录
                </button>
                <button class="layui-btn layui-btn-sm" data-type="consumption">
                    <i class="layui-icon layui-icon-rmb"></i>消费记录
                </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger" data-type="batchDel">
                    <i class="layui-icon layui-icon-delete"></i>批量删除
                </button>
                <button class="layui-btn layui-btn-sm layui-btn-normal" data-type="batchExport">
                    <i class="layui-icon layui-icon-export"></i>导出
                </button> -->
            </div>

            <!-- 数据表格 -->
            <table id="LAY-member-list" lay-filter="LAY-member-list"></table>
        </div>
    </div>
    <script type="text/html" id="statusTpl">
        {{# if(d.status === 1){ }}
        <span class="layui-badge layui-bg-green">正常</span>
        {{# }else if(d.status === 2){ }}
        <span class="layui-badge layui-bg-orange">冻结</span>
        {{# }else if(d.status === 3){ }}
        <span class="layui-badge layui-bg-gray">注销</span>
        {{# }else{ }}
        <span class="layui-badge layui-bg-blue">其他状态</span>
        {{# } }}
    </script>

    <!-- 表格操作列模板 -->
    <script type="text/html" id="table-member-operation">
        <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="recharge">充值</a>
        <!-- <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="adjustPoints">调积分</a> -->
<!--        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>-->
    </script>

    <script>
    layui.use(['table', 'form', 'layer', 'laydate'], function(){
        var $ = layui.$
        ,table = layui.table
        ,form = layui.form
        ,layer = layui.layer
        ,laydate = layui.laydate;
        
        //会员列表
        table.render({
            elem: '#LAY-member-list'
            ,url: '/app/ky_shouyin/admin/member/list'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'card_no', title: '会员卡号', width: 120}
                ,{field: 'name', title: '姓名', width: 100}
                ,{field: 'phone', title: '手机号码', width: 120}
                ,{field: 'status', title: '状态', width: 100, templet: '#statusTpl'}
                ,{field: 'balance', title: '账户余额', width: 100, templet: function(d){
                    return (d.balance === null || d.balance === undefined) ? '0.00' : parseFloat(d.balance).toFixed(2);
                }}
                // ,{field: 'points', title: '积分余额', width: 100}
                ,{field: 'store_name', title: '所属门店', width: 120}
                ,{field: 'created_at', title: '注册时间', width: 160}
                ,{title: '操作', toolbar: '#table-member-operation', width: 250, align: 'center', fixed: 'right'}
            ]]
            ,page: true
            ,limit: 20
            ,height: 'full-280'
            ,text: {
                none: '暂无数据'
            }
        });
        
        //监听工具条
        table.on('tool(LAY-member-list)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.open({
                    type: 2
                    ,title: '会员详情'
                    ,content: '/app/ky_shouyin/admin/member/detail?id=' + data.id
                    ,area: ['800px', '600px']
                    ,maxmin: true
                });
            } else if(obj.event === 'del'){
                layer.confirm('确定删除该会员？', function(index){
                    $.ajax({
                        url: '/app/ky_shouyin/admin/member/delete'
                        ,type: 'POST'
                        ,data: {id: data.id}
                        ,success: function(res){
                            if(res.code === 0){
                                layer.msg('删除成功', {icon: 1});
                                obj.del();
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'recharge'){
                layer.open({
                    type: 2
                    ,title: '会员充值'
                    ,content: '/app/ky_shouyin/admin/member/recharge?id=' + data.id
                    ,area: ['600px', '500px']
                    ,maxmin: true
                });
            } else if(obj.event === 'adjustPoints'){
                layer.prompt({
                    formType: 0
                    ,value: ''
                    ,title: '请输入调整积分（正数增加，负数减少）'
                }, function(value, index){
                    $.ajax({
                        url: '/app/ky_shouyin/admin/member/adjustPoints'
                        ,type: 'POST'
                        ,data: {
                            id: data.id,
                            points: value
                        }
                        ,success: function(res){
                            if(res.code === 0){
                                layer.msg('调整成功', {icon: 1});
                                table.reload('LAY-member-list');
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }
                    });
                    layer.close(index);
                });
            }
        });

        var active = {
            add: function(){
                layer.open({
                    type: 2
                    ,title: '添加会员'
                    ,content: '/app/ky_shouyin/admin/member/add'
                    ,area: ['800px', '600px']
                    ,maxmin: true
                });
            },
            generate: function(){
                layer.prompt({
                    formType: 0
                    ,value: '100'
                    ,title: '请输入生成数量'
                }, function(value, index){
                    $.ajax({
                        url: '/app/ky_shouyin/admin/member/generateCards'
                        ,type: 'POST'
                        ,data: {count: value}
                        ,success: function(res){
                            if(res.code === 0){
                                layer.msg('生成成功', {icon: 1});
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }
                    });
                    layer.close(index);
                });
            },
            card: function(){
                location.href = '/app/ky_shouyin/admin/member/card';
            },
            level: function(){
                location.href = '/app/ky_shouyin/admin/member/level';
            },
            points: function(){
                location.href = '/app/ky_shouyin/admin/member/points';
            },
            consumption: function(){
                location.href = '/app/ky_shouyin/admin/member/consumption';
            },
            batchDel: function(){
                var checkStatus = table.checkStatus('LAY-member-list')
                ,data = checkStatus.data;
                if(data.length === 0){
                    return layer.msg('请选择数据');
                }
                layer.confirm('确定删除选中的会员？', function(index){
                    //执行 Ajax 后重载
                    /*
                    admin.req({
                        url: 'xxx'
                        ,data: {}
                        ,done: function(){
                            table.reload('LAY-member-list');
                            layer.msg('已删除');
                        }
                    });
                    */
                    table.reload('LAY-member-list');
                    layer.msg('已删除');
                    layer.close(index);
                });
            },
            batchExport: function(){
                var checkStatus = table.checkStatus('LAY-member-list');
                var data = checkStatus.data;
                var ids = [];
                data.forEach(function(item){
                    ids.push(item.id);
                });
                window.location.href = '/app/ky_shouyin/admin/member/export?ids=' + ids.join(',');
            }
        };
        
        $('.layui-btn-container .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        
        //监听搜索
        form.on('submit(LAY-member-search)', function(data){
            var field = data.field;
            //执行重载
            table.reload('LAY-member-list', {
                where: field
            });
            return false;
        });
    });
    </script>
</div>

<!-- 会员详情模板 -->
<script type="text/html" id="memberDetailTpl">
<div class="content-body">
    <div class="layui-row layui-col-space15">
        <!-- 基本信息 -->
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">基本信息</div>
                <div class="layui-card-body">
                    <table class="layui-table" lay-skin="nob">
                        <colgroup>
                            <col width="100">
                            <col>
                        </colgroup>
                        <tbody>
                            <tr>
                                <td>会员姓名</td>
                                <td id="member-name">-</td>
                            </tr>
                            <tr>
                                <td>手机号码</td>
                                <td id="member-phone">-</td>
                            </tr>
                            <tr>
                                <td>会员等级</td>
                                <td id="member-level">-</td>
                            </tr>
                            <tr>
                                <td>账户余额</td>
                                <td id="member-balance">-</td>
                            </tr>
                            <tr>
                                <td>积分余额</td>
                                <td id="member-points">-</td>
                            </tr>
                            <tr>
                                <td>所属门店</td>
                                <td id="member-store">-</td>
                            </tr>
                            <tr>
                                <td>会员生日</td>
                                <td id="member-birthday">-</td>
                            </tr>
                            <tr>
                                <td>注册时间</td>
                                <td id="member-created">-</td>
                            </tr>
                            <tr>
                                <td>备注说明</td>
                                <td id="member-remark">-</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 消费统计 -->
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">消费统计</div>
                <div class="layui-card-body">
                    <div class="layui-form" style="padding-bottom: 10px;">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">统计时间</label>
                                <div class="layui-input-inline" style="width: 300px;">
                                    <input type="text" class="layui-input" id="date-range" placeholder="请选择日期范围">
                                </div>
                            </div>
                        </div>
                    </div>
                    <table class="layui-table" lay-skin="nob">
                        <colgroup>
                            <col width="100">
                            <col>
                        </colgroup>
                        <tbody>
                            <tr>
                                <td>消费次数</td>
                                <td id="stats-order-count">0</td>
                            </tr>
                            <tr>
                                <td>消费金额</td>
                                <td id="stats-total-amount">0.00</td>
                            </tr>
                            <tr>
                                <td>使用积分</td>
                                <td id="stats-points-used">0</td>
                            </tr>
                            <tr>
                                <td>获得积分</td>
                                <td id="stats-points-earned">0</td>
                            </tr>
                            <tr>
                                <td>充值次数</td>
                                <td id="stats-recharge-count">0</td>
                            </tr>
                            <tr>
                                <td>充值金额</td>
                                <td id="stats-recharge-amount">0.00</td>
                            </tr>
                            <tr>
                                <td>赠送金额</td>
                                <td id="stats-give-amount">0.00</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 消费趋势图 -->
    <div class="layui-card">
        <div class="layui-card-header">消费趋势</div>
        <div class="layui-card-body">
            <div id="consumption-chart" style="height: 300px;"></div>
        </div>
    </div>
</div>
</script>

<script type="text/html" id="operationBar">
    <button type="button" class="layui-btn layui-btn-xs" lay-event="detail">详情</button>
    <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</button>
    <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</button>
</script>

<!-- 在表格工具栏模板中添加详情按钮 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>

<script>
layui.use(['table', 'form', 'layer'], function(){
    var table = layui.table
    ,form = layui.form
    ,layer = layui.layer;
    
    // 监听工具条
    table.on('tool(memberTable)', function(obj){
        var data = obj.data;
        if(obj.event === 'detail'){
            layer.open({
                type: 2
                ,title: '会员详情'
                ,content: '/app/ky_shouyin/admin/member/detail?id=' + data.id
                ,area: ['800px', '600px']
            });
        } else if(obj.event === 'edit'){
            layer.open({
                type: 2
                ,title: '编辑会员'
                ,content: '/app/ky_shouyin/admin/member/edit?id=' + data.id
                ,area: ['800px', '600px']
            });
        } else if(obj.event === 'delete'){
            layer.confirm('确定删除该会员？', function(index){
                // 删除会员的代码...
            });
        }
    });
});
</script> 